import {useEffect, useState} from "react";
import {Button, message, Space, Table, Modal, Drawer, Form, Input} from 'antd';
import {fetchBooksListAPI, deleteBooksAPI, addBooksAPI, findBooksDetailAPI, editBooksAPI} from "./api";
import {useBooksColumns, useModalFooter} from "./hooks";


const App = () => {
    const [booksList, setBooksList] = useState([])
    const [book, setBook] = useState({})
    const [bookId, setBookId] = useState("")
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [open, setOpen] = useState(false);
    const [edit, setEdit] = useState(false);
    const [form] = Form.useForm()

    /*
    * 点击删除按钮的回调函数
    * */
    const deleteBook = (record) => {
        setIsModalOpen(true);
        setBook(record)
    }

    /*
    * 获取图书列表的回调函数
    * */
    const fetchBooksList = async () => {
        try {
            const {data} = await fetchBooksListAPI()
            setBooksList(data)
        } catch (error) {
            message.error("图书列表获取失败")
        }
    }

    /*
    * 添加图书的回调函数
    * */
    const addBooks = () => {
        setOpen(true);
        setEdit(false)
    }
    /*
    * 编辑图书的回调函数
    * */
    const editBook = async (record) => {
        const {data} = await findBooksDetailAPI(record.id)
        setOpen(true);
        setEdit(true)
        form.setFieldsValue(data)
        setBookId(record.id)
    }

    /*
    * 弹框点击确认按钮的回调函数(删除图书)
    * */
    const handleConfirm = async () => {
        try {
            await deleteBooksAPI(book.id)
            setIsModalOpen(false);
            await fetchBooksList()
            message.success("图书删除成功")
        } catch (error) {
            message.error("图书删除失败")
        }
    }
    /*
    * 弹框点击关闭按钮的回调函数
    * */
    const handleCancel = () => {
        setIsModalOpen(false);
        message.info("取消删除")
    }

    /*
    * 关闭抽屉组件的回调函数
    * */
    const onClose = () => {
        setOpen(false);
    };

    const onFinish = async (bookData) => {
        if (edit) {
            try {
                await editBooksAPI({data: bookData, id: bookId})
                await fetchBooksList()
                setOpen(false);
                message.success("图书修改成功")
            } catch (error) {
                message.error("图书修改失败")

            }
        } else {
            try {
                await addBooksAPI(bookData)
                await fetchBooksList()
                setOpen(false);
                message.success("图书添加成功")
            } catch (error) {
                message.error("图书添加失败")

            }
        }

    };

    const {modalFooter} = useModalFooter(handleCancel, handleConfirm)
    const {columns} = useBooksColumns(editBook, deleteBook)
    const title = edit ? "编辑图书" : "添加图书"
    useEffect(() => {
        fetchBooksList();
    }, [])
    return (
        <div className="App">
            <div className="button"><Button type="primary" onClick={addBooks}>添加图书</Button></div>
            <Table columns={columns} dataSource={booksList} rowKey={record => record.id}></Table>
            <Modal title="提示" open={isModalOpen} footer={modalFooter}><p>确认删除{book.bookname}吗?</p></Modal>
            <Drawer title={title} onClose={onClose} open={open}>
                <Form name="basic" onFinish={onFinish} form={form}>
                    <Form.Item label="图书的名字" name="bookname">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="图书的作者" name="author">
                        <Input/>
                    </Form.Item>
                    <Form.Item label="图书出版社" name="publisher">
                        <Input/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    )
}
export default App;
